<template>
    <div class="poa message_fan">
        <title_common :text="'粉丝'" />
        <div class="list_big">
            <user_list @follow="follow" v-for="item, index in list" :item=item :index=index :key=index />
        </div>
        <MyMessage :flag="alert_flag" :text="error_text" />
    </div>
</template>
<script setup>
import { defineAsyncComponent, ref } from 'vue';
import { get_fan, user_follow } from '../../api/api';
const title_common = defineAsyncComponent(() => import('../common/title_common.vue'))
const user_list = defineAsyncComponent(() => import('../common/user_list.vue'))
let list = ref([])
let alert_flag = ref(false)
let error_text = ref('')
get_fan(`api/user/${JSON.parse(localStorage.getItem('user')).userId}/Fans/page/1/${JSON.parse(localStorage.getItem('user')).userId}`).then(res => {
    if (res.data.code == 200) {
        list.value = res.data.data
    }
})
function alertfn(text) {
    error_text.value = text
    alert_flag.value = true
    setTimeout(() => {
        alert_flag.value = false
    }, 2000)
}
function follow(obj) {
    user_follow(`api/user/${JSON.parse(localStorage.getItem('user')).userId}/triggerFollow/${obj.id}`).then(res => {
        if (res.data.code == 200) {
            if (res.data.data == '关注成功') {
                alertfn('关注成功')
                list.value[obj.index].bothStatus = 1
            } else {
                alertfn('取关成功')
                list.value[obj.index].bothStatus = 0
            }
        }
    })
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.message_fan {
    background-color: #161622;
}

.list_big {
    overflow-y: scroll;
    color: #fff;
    height: 100%;
    padding-bottom: r(44);
}
</style>